import React, { useState } from 'react'
import type { FC } from 'react'
import { Button, Flex, Form, Input, Select, Radio } from 'antd'
import type { FormProps } from 'antd'
import { DesktopOutlined } from '@ant-design/icons'
import icons from '@/config/icons'
import { addNodeApi } from '@/services/authApi'

interface IProps {
  changeVisiable: (show: boolean) => void
}

const AuthForm: FC<IProps> = ({ changeVisiable }) => {
  const [form] = Form.useForm()
  const [icon, setIcon] = useState('DesktopOutlined')
  const [isShowRoute, setIsShowRoute] = useState(true)
  const onFinish: FormProps<any>['onFinish'] = async (values) => {
    values = { ...values, icon }
    let ret = await addNodeApi(values)
    if (ret.code === 0) {
      // 重置表单
      form.resetFields()
      setIcon('DesktopOutlined')
      setIsShowRoute(true)
      // 关闭弹出层
      changeVisiable(false)
    }
  }

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ menu: 1, pid: 0 }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item label="上级节点" name="pid">
        <Select placeholder="请选择分类层级" style={{ width: 260 }}>
          <Select.Option value={0}>顶层分类</Select.Option>
          <Select.Option value={1}>后台数据</Select.Option>
          <Select.Option value={2}>后台设置</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item
        label="节点名称"
        name="name"
        extra={<div>例：用户列表</div>}
        validateTrigger="onBlur"
        rules={[
          { required: true, whitespace: true, message: '请输入节点名称' },
          {
            validator: (rule, value: string | undefined) => {
              // 唯一性判断 -- 网络请求
              return Promise.resolve()
            }
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="节点标识"
        name="ename"
        validateTrigger="onBlur"
        extra={<div>例：user-list</div>}
        rules={[
          { required: true, whitespace: true, message: '请输入节点标识' },
          {
            validator: (rule, value: string | undefined) => {
              // 唯一性判断 -- 网络请求
              return Promise.resolve()
            }
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="菜单" name="menu">
        <Radio.Group>
          <Radio
            value={0}
            onChange={(e) => {
              setIsShowRoute(e.target.value == 0 ? false : true)
            }}
          >
            否
          </Radio>
          <Radio
            value={1}
            onChange={(e) => {
              setIsShowRoute(e.target.value == 0 ? false : true)
            }}
          >
            是
          </Radio>
        </Radio.Group>
      </Form.Item>
      {/* {isShowRoute && (
        <Form.Item label="路由" name="route" extra={<div>例：/sys/user</div>}>
          <Input />
        </Form.Item>
      )} */}
      <Form.Item
        label="路由"
        name="route"
        extra={<div>例：/sys/user</div>}
        rules={[
          {
            validator: (rule, value: string | undefined) => {
              // 如果你选中了菜单，则一定要有路由地址
              if (isShowRoute) {
                if (!value) {
                  return Promise.reject('路由地址不能为空')
                }
                if (!value.startsWith('/')) {
                  return Promise.reject('路由地址不要求')
                }
              } else {
                // 如果你没有选菜单，但你填写了路由地址，则一定要符合/开头
                if (value && !value.startsWith('/')) {
                  return Promise.reject('路由地址不能为空')
                }
              }
              return Promise.resolve()
            }
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="图标" name="icon">
        <div>
          {/* <Input /> */}
          {/* <input value={icon} onChange={() => {}} readOnly /> */}
          <div style={{ fontSize: 20, fontWeight: 'bold' }}>
            {(icons as any)[icon] ?? <DesktopOutlined />}
          </div>
          <div className="icons">
            <ul>
              {Object.keys(icons).map((key) => {
                return (
                  <li
                    key={key}
                    onClick={() => {
                      setIcon(key)
                    }}
                  >
                    {(icons as any)[key]}
                  </li>
                )
              })}
            </ul>
          </div>
        </div>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
        <Flex gap="small">
          <Button type="primary" htmlType="submit">
            {' '}
            保存权限节点数据{' '}
          </Button>
        </Flex>
      </Form.Item>
    </Form>
  )
}

export default AuthForm
